<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head  >
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>首页</title>
        <base href="${pageContext.request.contextPath}/">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="css/style.css"/>

        <!--<script src="js/custom.js"></script>-->

    </head>
    <body >
        <!--头部-->
        <script>

            $(document).ready(function () {
                $("#searchbtn").click(function () {
                    $.ajax({
                        url: 'find/search',
                        type: "GET",
                        dataType: 'JSON',
                        contentType: "application/json; charset=utf-8",
                        data: {keyword: $("#inputKeyword").val()},
                        success: function (list) {
                            console.log("数据对象：" + list);
                            $("#searchdiv").empty();
                            for (var i = 0; i < list.length; i++) {
                                console.log(" 数据：" + list[i].ltitle + " , prodTitle数据：" + list[i].lcontent,+"编号："+list[i].lid);
                                var str =
                                        "  <div class=\"des-cov\">"
                                        + "<div class=\"des-img\">"
                                        + "<a href=\"#!\"><img src=\"img/悉尼.png\" alt=\"\"></a>"
                                        + "</div>"
                                        + "<div class=\"des-para\">"
                                        + "<div class=\"dayt\">"
                                        + " <h6><a href='logdetail/log?name=${list[i].lid}'>" + list[i].ltitle + "</a></h6>"
                                        + "</div>"
                                        + "<div class=\"real-dat-para\">"
                                        + "<p>" + list[i].lcontent + "</p>"
                                        + "</div>"
                                        + "<div class=\"des-button-icon\">"
                                        + "<div class=\"das-into-btn\">"
                                        + "<a href=\"#!\" class=\"btn btn-3\" data-toggle=\"modal\" data-target=\"#myModal\">详情</a>"
                                        + "</div>"
                                        + "<div class=\"start-icon-des\">"
                                        + "<i class=\"glyphicon glyphicon-star\"></i>"
                                        + "<i class=\"glyphicon glyphicon-star\"></i>"
                                        + "<i class=\"glyphicon glyphicon-star\"></i>"
                                        + "<i class=\"glyphicon glyphicon-star\"></i>"
                                        + "<i class=\"glyphicon glyphicon-star\"></i>"
                                        + "</div>"
                                        + "</div>"
                                        + "</div>"
                                        + "</div>";
                                $("#searchdiv").append(str);
                            }
                            ;
                        },
                        error: function (req, status, error) {
                            alert("Ajax请求失败！" + error);
                        }
                    });
                });
            }
            );


        </script>
        <div class="header-most-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 col-md-8 col-sm-8 col-12">
                        <div class="main-flex-top">
                            <div class="email sel d-flex">
                                <div class="main-email-text d-flex">
                                    <i class="glyphicon glyphicon-envelope"></i>
                                    <p>123@XZ.com</p>
                                </div>
                                <div class="main-loc-text d-flex">
                                    <i class="glyphicon glyphicon-map-marker"></i>
                                    <p>你梦想中的城市</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-4 col-sm-4 col-12">
                        <div class="login-area">
                            <div class="seclict-area">
                                <i class="glyphicon glyphicon-home" style="color: #e9dbf0;"></i>
                                <select name="cars">
                                    <option value="volvo">CN</option>
                                    <option value="saab">US</option>
                                    <option value="fiat">GE</option>
                                    <option value="audi">FRANCH</option>
                                </select>
                            </div>
                            <div class="user-log">
                                <i class="glyphicon glyphicon-user"></i>
                                <a href="#">登录&nbsp;|</a>
                                <a href="#">注册</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--导航栏-->
    <header id="top-heder-nav">
        <nav class="navbar navbar-expand-lg" data-toggle="sticky-onscroll">
            <div class="container">
                <a class="navbar-brand" href="index">
                    <img src="img/logo.png" alt="">
                </a>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link active" href="index">首页</a></li>
                        <li class="nav-item"><a class="nav-link active" href="index">读书日记</a></li>
                        <li class="nav-item"><a class="nav-link active" href="index">读书活动</a></li>
                    </ul>
                </div>

                <div class="left-menu-pho">
                    <div class="icon-phon-men">
                        <i class="glyphicon glyphicon-leaf"></i>
                    </div>
                    <div class="phone-number-idel">
                        <h4>世界那么大</h4>
                        <p>我想去看看</p>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <!-- 搜索框-->
    <div class="topnav">
        <a href="logdetail/ulog?uname=${loginUser.uname}">个人日志</a>
        <a href="publish/plog?uname=${loginUser.uname}">发布日志</a>
        <div class="search-container">
            <form action="find/search">
                <input type="text" id="inputKeyword" placeholder="搜索.." name="keyword"  value="${param.keywrod}">
                <button id="searchbtn" type="button"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </div>
    <!--  搜索框 end-->

    <!-- 一块块的东西 start-->
    <section id="tour-des">

        <!--ajax部分-->
        <div class="container" style="margin-left:-10px;margin-top:-100px">
            <div class="slider-des" style="width: 1500px;"><br><br><br><br><br><br><br>
                <div class="container" style="margin-left:-10px;margin-top:-200px;margin-bottom:100px;">
                    <div id="searchdiv"  class="slider-des" style="width: 1500px;">
                          <!--根据点赞前几名动态显示-->
                          <form id="topLogs" style="display:inline-block;
　　width:500px;">
                    <c:forEach items="${topLogList}" var="l">
                        <div class="des-cov" >
                                    <div class="des-img">
                                        <a href="#!"><img src="img/书籍图/${l.ltitle}.jpg" alt=""></a>
                                    </div>
                                    <div class="des-para">
                                        <div class="dayt">
                                            <h6><a href="logdetail/log?name=${l.lid}">${l.ltitle}</a></h6>
                                        </div>
                                        <div class="real-dat-para">
                                            <p class="shenglvehao" style=" max-height: 200px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;"> ${l.lcontent}</p>
                                        </div>
                                        <div class="des-button-icon">
                                            <div class="das-into-btn">
                                                <a href="#!" class="btn btn-3" data-toggle="modal" data-target="#myModal">详情</a>
                                            </div>
                                            <div class="start-icon-des">
                                                <i class="glyphicon glyphicon-star"></i>
                                                <i class="glyphicon glyphicon-star"></i>
                                                <i class="glyphicon glyphicon-star"></i>
                                                <i class="glyphicon glyphicon-star"></i>
                                                <i class="glyphicon glyphicon-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                       

                    </c:forEach>
                </form>
                <!--根据点赞前几名动态显示 end-->
                <!--ajax部分end-->   
            </div>
        </div>

    </section>
    <!-- 一块块的东西 end-->

    <!--怎么覆盖之前查出来的-->



    <!--尾部-->
    <div class="footre-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 col-sm-8 col-8">
                    <div class="copy-right-para">
                        <p>版权所有 &copy; 2019.张彦 陈新 毕爱卿 付丽瑶</p>
                    </div>
                </div>
                <div class="col-lg-6 col-md-4 col-sm-4 col-4">
                    <div class="copy-right-icon">
                        <a href="#"><i class="glyphicon glyphicon-thumbs-up face no-ag"></i></a>
                        <a href="#"><i class="glyphicon glyphicon-gift face"></i></a>
                        <a href="#"><i class="glyphicon glyphicon-heart-empty face"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--尾部结束-->



</body>
</html>
